<template>
    <div class="contentPage">
        <div class="noPc" style="height: 6px;background: #F2F2F2;width: 100%"></div>
        <!--        <div class="announcement">http://www.baidu.com</div>-->
        <van-notice-bar class="notice-scroll" left-icon="volume-o" :scrollable="false">
            <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="4000"
                :touchable="false"
                :show-indicators="false"
            >
                <van-swipe-item v-for="(item,index) in params.loginInfo" :key="index">
                    <div class="tips" :style="{fontSize: '12px',color: item.isLogin?'':'red'}" v-if="item.isLogin">
                        * {{ item.plamtName }}
                        数据更新于
                        {{ item.syncAt }}
                    </div>
                    <div class="tipsNo" v-else :style="{fontSize: '12px',color: item.isLogin?'':'red'}">*
                        数据更新延迟，处理后将重新获取数据
                    </div>
                </van-swipe-item>
            </van-swipe>
        </van-notice-bar>
        <div class="mobile">
            <div class="search">
                <div class="searchInput" @click="params.showPopup = true">
                    <div
                        style="height: 22px;line-height: 22px;color: #969799;padding: 0 6px;font-size: 12px;display: flex;justify-content: space-between">
                        <span>{{ params.date || '选择日期' }}</span>
                        <!--                        <span></span>-->
                        <CloseCircleOutlined v-if="params.date" @click.stop="params.date = ''" color="#969799"/>
                    </div>

                    <!--                    <input type="text" disabled v-model="params.date" placeholder="选择日期" @click="params.showPopup = true">-->
                </div>
                <div class="searchBtn" @click="search()">搜索</div>
                <div class="searchBtn" @click="params.showCard = true">单店看板</div>
            </div>
            <!--            <div style="margin: 12px 0">日期：{{ params.counts.back_date }}</div>-->
            <div class="list">
                <van-pull-refresh class="listRefresh" v-model="params.loading" @refresh="onRefresh">
                    <van-list
                        v-model="params.bottomLoading"
                        :finished="params.finished"
                        style="height: 100%"
                        finished-text="没有更多了"
                        loading-text="加载中..."
                        @load="onLoad"
                    >

                        <div class="listItem" v-for="(item,index) in params.data" :key="index">
                            <div style="font-size: 12px">{{ item.date }}</div>
                            <div class="itemCard">
                                <div class="line">
                                    <div>
                                        <span class="desc">营业额：</span>
                                        <span>{{ item.income }}</span>
                                    </div>
                                    <div>
                                        <span class="desc">分账金额：</span>
                                        <span v-if="Number(item.back_money) > 0">{{ params.my.isShow?item.myBackMoney: item.back_money }}</span>
                                        <span v-else style="color: red;font-size: 12px">还未分账</span>

                                    </div>
                                </div>
                                <div class="line">
                                    <div>
                                        <span class="desc">应结金额：</span>
                                        <span>{{ params.my.isShow? item.myExpectedMoney :item.expected_money }}</span>
                                    </div>
                                    <div>
                                        <span class="desc">实收差异：</span>
                                        <span>{{ params.my.isShow? item.myBackDiffMoney : item.back_diff_money }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
                <div v-if="params.data.length <= 0" style="    text-align: center;
    padding: 20% 0;
    font-size: 12px;
    color: #7d7d7d;">暂无数据
                </div>
            </div>
        </div>
        <div class="pc">
            <div class="pcTitleContent">
                <div class="tips">
                    <a-tag :color="getStatus(params.counts?.incom_status).color">
                        {{ getStatus(params.counts?.incom_status).name }}
                    </a-tag>
                    <span>{{ params.storeInfo.mallName }}</span>
                </div>
                <div class="pcTableBox">
                    <table class="pcTable">
                        <tbody class="pcTbody">
                        <tr>
                            <td>预计回本</td>
                            <td>回本金额</td>
                            <td>回本比例</td>
                            <td>收益金额</td>
                            <td>出资金额</td>
                            <td>收益比例</td>
                            <td>应收总额</td>
                            <td>分账比例</td>
                            <td>差异总额</td>
                        </tr>
                        <tr>
                            <td>{{ params.counts.back_date }}</td>
                            <td>{{ params.my.isShow? params.my.backMoney  :params.counts.back_money }}</td>
<!--                            {{ params.data.my.isShow? params.data.my.backMoney:params.data.backMoney }}-->
                            <td>{{ params.counts.back_rate }}%</td>
                            <td>{{ params.counts.income_money }}</td>
                            <td>{{ params.my.isShow? params.my.money : params.counts.money }}</td>
                            <td>{{ params.counts.income_rate }}%</td>
                            <td>{{ params.my.isShow? params.my.allMoney : params.counts.total_money }}</td>
                            <td>{{ params.counts.sub_account_rate }}%</td>
                            <td>{{ params.counts.back_diff_money }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="search">
                <div style="width: 350px">
                    <van-notice-bar class="notice-scroll-pc" left-icon="volume-o" :scrollable="false">
                        <van-swipe
                            vertical
                            class="notice-swipe"
                            :autoplay="4000"
                            :touchable="false"
                            :show-indicators="false"
                            color="#ffffff"
                        >
                            <van-swipe-item v-for="(item,index) in params.loginInfo" :key="index">
                                <div class="tips" :style="{fontSize: '12px',color: item.isLogin?'':'red'}"
                                     v-if="item.isLogin">*
                                    {{ item.plamtName }}
                                    数据更新于
                                    {{ item.syncAt }}
                                </div>
                                <div class="tipsNo" v-else :style="{fontSize: '12px',color: item.isLogin?'':'red'}">*
                                    数据更新延迟，处理后将重新获取数据
                                </div>
                            </van-swipe-item>
                        </van-swipe>
                    </van-notice-bar>
                </div>
                <!--                <div style="width: 100%;margin-bottom: 12px" v-if="params.loginInfo.isLogin">* 数据更新于 {{ params.loginInfo.syncAt }}</div>-->
                <!--                <div style="width: 100%;margin-bottom: 12px;color: red" v-else>* 数据更新延迟，处理后将重新获取数据</div>-->
                <div class="left">
                    <a-range-picker v-model:value="params.times" :locale="params.locale" @change="timeCgange" formata="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                    <div class="btn" style="background: #81d3f8;margin-left: 12px;cursor: pointer" @click="getList()">查询</div>
                </div>
                <div class="btn" style="border: 1px solid #000000;cursor: pointer" @click="downloadFile()">导出数据
                </div>
            </div>
            <div class="pcTableBox">
                <table class="pcTable">
                    <tbody class="pcTbody">
                    <tr>
                        <td>日期</td>
                        <td>营业额</td>
                        <td>分账金额</td>
                        <td>应结金额</td>
                        <td>实收差异</td>
                    </tr>
                    <tr v-for="(item,index) in params.data" :key="index">
                        <td>{{ item.date }}</td>
                        <td>{{ item.income }}</td>
                        <td>{{ params.my.isShow?item.myBackMoney: item.back_money }}</td>
                        <td>{{ params.my.isShow? item.myExpectedMoney :item.expected_money }}</td>
                        <td>{{ params.my.isShow? item.myBackDiffMoney : item.back_diff_money }}</td>
                    </tr>
                    </tbody>
                </table>
                <div style="text-align: right;margin-top: 12px">
                    <a-pagination v-model:current="params.page" :total="params.total" @change="pageChange"/>
                </div>
            </div>
        </div>
        <van-popup v-model:show="params.showPopup" position="bottom" style="width: 100%">
            <van-date-picker
                v-model="params.currentDate"
                title="选择日期"
                @confirm="confirmDate(true)"
                @cancel="confirmDate(false)"
            />
        </van-popup>
        <van-popup v-model:show="params.showCard" closeable round style="padding: 12px 12px;width: 90%">
            <div class="cardPopup">
                <div style="margin-top: 10px">
                    <a-tag :color="getStatus(params.counts?.incom_status).color">
                        {{ getStatus(params.counts?.incom_status).name }}
                    </a-tag>
                    <span>{{ params.storeInfo.mallName }}</span>
                </div>
                <div class="line">
                    <div>
                        <span class="desc">回本金额：</span>
                        <span>{{ params.my.isShow? params.my.backMoney  :params.counts.back_money }}</span>
                    </div>
                    <div>
                        <span class="desc">出资金额：</span>
                        <span>{{ params.my.isShow? params.my.money : params.counts.money }}</span>
                    </div>
                </div>
                <div class="line">
                    <div>
                        <span class="desc">回本比例：</span>
                        <span>{{ params.counts.back_rate }}%</span>
                    </div>
                    <div>
                        <span class="desc">收益比例：</span>
                        <span>{{ params.counts.income_rate }}%</span>
                    </div>
                </div>
                <div class="line">
                    <div>
                        <span class="desc">收益金额：</span>
                        <span>{{ params.counts.income_money }}</span>
                    </div>
                    <div>
                        <span class="desc">应收总额：</span>
                        <span>{{ params.my.isShow? params.my.allMoney : params.counts.total_money }}</span>
                    </div>
                </div>
                <div class="line">
                    <div>
                        <span class="desc">分账比例：</span>
                        <span>{{ params.counts.sub_account_rate }}%</span>
                    </div>
                    <div>
                        <span class="desc">差异总额：</span>
                        <span>{{ params.counts.back_diff_money }}</span>
                    </div>
                </div>
                <div class="time">预计回本：{{ params.counts.back_date }}</div>
            </div>
        </van-popup>
    </div>
</template>
<script setup>
import {reactive, onMounted} from 'vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {getDetail, getStore} from '../../api/index.js'
import {useRoute} from 'vue-router';
import {CloseCircleOutlined} from '@ant-design/icons-vue'

const route = useRoute();
const params = reactive({
    locale,
    times: [],
    open: false,
    loading: false,
    bottomLoading: false,
    showCard: false,
    date: '',
    finished: false,
    showPopup: false,
    tabsActive: 0,
    total: 0,
    page: 0,
    pageSize: 10,
    data: [],
    tabs: [
        {name: '全部', key: -1, color: '#FACD91'},
        {name: '回本期', key: 0, color: '#FACD91'},
        {name: '收益期', key: 1, color: '#CAF982'},
        {name: '已结束', key: 2, color: '#C280FF'},
    ],
    list: [],
    storeInfo: {},
    counts: {
        incom_status: 0
    },
    my:{
        isShow: false
    },
    loginInfo: {},
    currentDate: []
})
onMounted(() => {
    if (window.innerWidth > 767) {
        params.page += 1
        getList()
    }
})
const search = () => {
    params.page = 1
    getList(true)
}
const getList = (type) => {
    let data = {
        mallId: route.query.id,
        page: params.page,
        pageSize: params.pageSize,
        date: params.date
    }
    if (params.times) {
        data.dateLeft = params.times[0]
        data.dateRight = params.times[1]
    }
    getDetail(data).then(res => {
        if (type) {
            params.data = res.data.items.dateDatas
        } else {
            params.data = params.data.concat(res.data.items.dateDatas)
        }

        params.bottomLoading = false
        params.loading = false
        if (params.data.length - 1 === res.data.total) params.finished = true
        params.storeInfo = res.data.items.mallInfo
        document.title = params.storeInfo.mallName
        params.counts = res.data.items.counts
        params.loginInfo = res.data.items.loginInfo
        params.total = res.data.total
        params.my = res.data.items.my
    })
}
const downloadFile = () => {
    let data = {mallId: route.query.id, page: params.page, pageSize: params.pageSize, date: params.date, download: 1}
    getDetail(data).then(res => {
        console.log(res, 'res')
        window.open(res.data.fileUrl, '_blank')
        // params.bottomLoading = false
        // params.loading = false
        // params.data = res.data.allMallDatas
        // params.list = res.data.mallData
        // params.listAll = res.data.mallData
        // params.loginInfo = res.data.loginInfo
        // changeTabs(params.status?params.status-1:-1)
    })
}
const onLoad = () => {
    if (params.bottomLoading) return;
    params.bottomLoading = true
    params.page += 1
    getList()
}
const onRefresh = (done) => {
    params.page = 1
    getList()
};
const confirmDate = (e) => {
    params.showPopup = false
    params.date = params.currentDate.join('-')
    if (e) getList()
}
const pageChange = (e, s) => {
    params.page = e
    params.pageSize = s
    getList(true)
}
const getStatus = (type) => {
    let obj = {}
    params.tabs.map(tab => {
        if (tab.key === type) obj = tab
    })
    return obj
}
const timeCgange = (e,s) => {
    console.log(e,s)
}
</script>
<style scoped lang="less">
/* 小屏幕设备样式 */
@media only screen and (max-width: 767px) {
    @import './index-mobile.less';
}

/* 大屏幕设备样式 */
@media only screen and (min-width: 768px) {
    @import './index-pc.less';
    ::v-deep .van-notice-bar__content {
        height: 24px;
    }
}

::v-deep.van-notice-bar {
    height: 24px;
}
</style>
